<script lang="jsx" setup>
import { SearchOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

const model = ref({
  customerCode: null,
  customerName: null,
  customerAbbreviation: null,
  salesArea: null,
  customerModel: null,
  moduleNo: null,
  surface: null,
  teachType: null,
  materialNo: null,
  compositionMode: null,
  boardType: null,
  productType: null,
  width: null,
  floorCount: null,
  index: null,
  copper: null,
  solderResistColor: null,
  textColor: null,
  factoryCode: null,
  height: null,
  boradHeight: null,
  coreBoardHeight: null,
  structuralTemplate: null,
  modelRemark: null
});

const topFormList = [
  {
    type: 'input',
    key: 'customerCode',
    label: '客户代码',
    placeholder: '请输入客户代码',
    span: 6
  },
  {
    type: 'input',
    key: 'customerName',
    label: '客户名称',
    placeholder: '请输入客户名称',
    span: 6
  },
  {
    type: 'input',
    key: 'customerAbbreviation',
    label: '客户简称',
    placeholder: '请输入客户简称',
    span: 6
  },
  {
    type: 'input',
    key: 'salesArea',
    label: '销售区域',
    placeholder: '请输入销售区域',
    span: 6
  },
  {
    type: 'input',
    key: 'customerModel',
    label: '客户型号',
    placeholder: '请输入客户型号',
    span: 6
  },
  {
    type: 'input',
    key: 'moduleNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 6
  },
  {
    type: 'input',
    key: 'surface',
    label: '表面工艺',
    placeholder: '请输入表面工艺',
    span: 6
  },
  {
    type: 'input',
    key: 'teachType',
    label: '工艺类型',
    placeholder: '请输入工艺类型',
    span: 6
  },
  {
    type: 'input',
    key: 'materialNo',
    label: '物料号',
    placeholder: '请输入物料号',
    span: 6
  },
  {
    type: 'input',
    key: 'compositionMode',
    label: '拼版方式',
    placeholder: '请输入拼版方式',
    span: 6
  },
  {
    type: 'input',
    key: 'boardType',
    label: '板类别',
    placeholder: '请输入板类别',
    span: 6
  },
  {
    type: 'input',
    key: 'productType',
    label: '产品类型',
    placeholder: '请输入产品类型',
    span: 6
  },
  {
    type: 'input',
    key: 'width',
    label: '成品尺寸',
    placeholder: '请输入成品尺寸',
    span: 6
  },
  {
    type: 'input',
    key: 'floorCount',
    label: '板层数',
    placeholder: '请输入板层数',
    span: 6
  },
  {
    type: 'input',
    key: 'index',
    label: '顺序号',
    placeholder: '请输入顺序号',
    span: 6
  },
  {
    type: '',
    span: 6
  },
  {
    type: 'input',
    key: 'copper ',
    label: '成品铜厚',
    placeholder: '请输入成品铜厚',
    span: 6
  },
  {
    type: 'input',
    key: 'solderResistColor',
    label: '阻焊颜色',
    placeholder: '请输入阻焊颜色',
    span: 6
  },
  {
    type: 'input',
    key: 'textColor',
    label: '字符颜色',
    placeholder: '请输入字符颜色',
    span: 6
  },
  {
    type: 'input',
    key: 'factoryCode',
    label: '工厂代码',
    placeholder: '请输入工厂代码',
    span: 6
  },

  {
    type: 'input',
    key: 'boradHeight',
    label: '成品板厚',
    placeholder: '请输入成品板厚',
    span: 6
  },
  {
    type: 'input',
    key: 'coreBoardHeight',
    label: '芯板板厚',
    placeholder: '请输入芯板板厚',
    span: 6
  },
  {
    type: 'input',
    key: 'structuralTemplate',
    label: '结构模板',
    placeholder: '请输入结构模板',
    span: 6,
    suffixSlot: <SearchOutlined class="cursor-pointer" onClick={() => handleSearch()} />
  },
  {
    type: 'input',
    key: 'modelRemark',
    label: '型号备注',
    placeholder: '请输入型号备注',
    span: 6
  }
];

const bottomFormList = [
  {
    type: 'textarea',
    key: 'modelRemark',
    label: '出货要求',
    placeholder: '请输入出货要求',
    span: 24
  },
  {
    type: 'input',
    key: 'additionalMark',
    label: '附加标记',
    placeholder: '请输入附加标记',
    span: 6
  },
  {
    type: 'select',
    key: 'baseBoardManufacturer',
    label: '基板厂商',
    placeholder: '请输入基板厂商',
    span: 6,
    selectOptions: []
  },
  {
    type: 'input',
    key: 'boardType',
    label: '板材类型',
    placeholder: '请输入板材类型',
    span: 6
  },
  {
    type: 'input',
    key: 'forkPlateRatio',
    label: '叉板比例',
    placeholder: '请输入叉板比例',
    span: 6
  },
  {
    type: 'input',
    key: 'holeCopperThickness',
    label: '孔铜厚度',
    placeholder: '请输入孔铜厚度',
    span: 6
  },
  {
    type: 'input',
    key: 'equivalentType',
    label: '同等型号',
    placeholder: '请输入同等型号',
    span: 6
  },
  {
    type: 'input',
    key: 'scrapQuantityAccepted',
    label: '接受报废数量',
    placeholder: '请输入接受报废数量',
    span: 6
  },
  {
    type: 'input',
    key: 'currency',
    label: '币种',
    placeholder: '请输入币种',
    span: 6
  },
  {
    type: 'input',
    key: 'textType',
    label: '测试类型',
    placeholder: '请输入测试类型',
    span: 6
  },
  {
    type: 'input',
    key: 'formingMethod',
    label: '成型方式',
    placeholder: '请输入成型方式',
    span: 6
  },
  {
    type: 'input',
    key: 'testCondition',
    label: '埋盲孔板',
    placeholder: '请输入埋盲孔板',
    span: 6
  },
  {
    type: 'input',
    key: 'testResult',
    label: '线路面板',
    placeholder: '请输入线路面板',
    span: 6
  },
  {
    type: 'input',
    key: 'aniseedSize',
    label: '大料尺寸',
    placeholder: '请输入大料尺寸',
    span: 6
  },
  {
    type: 'input',
    key: 'modeDelivery',
    label: '交货方式',
    placeholder: '请输入交货方式',
    span: 6
  },
  {
    type: 'input',
    key: 'deliveryDate',
    label: '过孔处理',
    placeholder: '请输入过孔处理',
    span: 6
  },
  {
    type: 'input',
    key: 'productFeatures',
    label: '产品特性',
    placeholder: '请输入产品特性',
    span: 6
  },
  {
    type: 'input',
    key: 'packingMethod',
    label: '包装方式',
    placeholder: '请输入包装方式',
    span: 6
  },
  {
    type: 'input',
    key: 'warranty',
    label: '环保要求',
    placeholder: '请输入环保要求',
    span: 6
  },
  {
    type: 'input',
    key: 'packageType',
    label: '包装纸箱',
    placeholder: '请输入包装纸箱',
    span: 6
  },
  {
    type: 'checkbox',
    key: 'newProof',
    label: <span class="color-red">新版打样</span>,
    placeholder: '请输入包装纸箱',
    span: 6,
    selectOptions: [{ label: '', value: '1' }]
  },
  {
    type: 'input',
    key: 'packageType',
    label: '阻抗板',
    placeholder: '请输入阻抗板',
    span: 6
  },
  {
    type: 'input',
    key: 'source',
    label: '资料来源',
    placeholder: '请输入资料来源',
    span: 6
  },
  {
    type: 'input',
    key: 'stacksNumber ',
    label: '叠板数量',
    placeholder: '请输入叠板数量',
    span: 6
  },
  {
    type: 'input',
    key: 'qualityLevel',
    label: '品质级别',
    placeholder: '请输入品质级别',
    span: 6
  }
];
</script>

<template>
  <div class="h-full w-full pt-10px">
    <div class="required">
      <div class="title color-red">*必填项</div>
      <Form v-model:model="model" :form-list="topFormList"></Form>
    </div>

    <div class="required mt-15px">
      <div class="title">*非必填项</div>
      <Form v-model:model="model" :form-list="bottomFormList"></Form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.required {
  padding: 15px;
  position: relative;
  border: 1px solid #eee;
  width: 100%;
  border-radius: 8px;

  .title {
    position: absolute;
    background-color: #fff;
    top: -10px;
    left: 20px;
    z-index: 999;
    padding: 0 10px;
    font-weight: bold;
  }
}
</style>
